<!-- eslint-disable no-unused-expressions -->
<!-- eslint-disable radix -->
<!-- eslint-disable no-useless-escape -->
<!-- eslint-disable no-param-reassign -->
<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2023-10-13 11:41:12
 * @LastEditTime: 2024-07-02 17:13:48
 * @LastEditors:  Please set LastEditors
-->
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, powerBankApi, userApi } from '@/api'
import { checkLoginState, getImgFullPath } from '@/utils/index'
import { useUserStore, useConfigStore } from '@/store'
import {
  browserVersion,
  compareVersion,
  qs,
  getQueryVariable,
  launchClientApp,
  route,
  isWeChat
} from '@/utils/common'

const userStore = useUserStore()
const configStore = useConfigStore()
const mask = ref(false)
function openApp() {
  mask.value = false
  uni.showLoading({
    title: '正在打开APP'
  })
  setTimeout(() => {
    uni.hideLoading()
  }, 2000)
  launchClientApp(() => {
    mask.value = true
  })
}

// 会员卡
const cardParmas = reactive({
  id: '',
  createTime: '',
})
async function getCard() {
  if (!cardParmas.id || !cardParmas.createTime) return
  uni.showLoading()
  await powerBankApi.getCard(cardParmas).finally(() => { uni.hideLoading() })
  uni.showToast({
    title: '会员卡领取成功',
    icon: 'none'
  })
  mask.value = true
  // route({
  //   url: '/packageB/pages/carWash/topUp'
  // })
}
onLoad(async (option) => {
  if (option?.id) {
    cardParmas.id = option.id
  }
  if (option?.createTime) {
    cardParmas.createTime = option.createTime
  }
  // const isApp = option?.from || browserVersion().isHeiyin
  // if (isApp) {
  //   // #ifdef H5
  //   // @ts-ignore
  //   window.JSBridge.registerEvent('HYUserEvent', async () => {
  //     await getCard()
  //   })
  //   // #endif
  // } else {
  //   if (browserVersion().mobile && !configStore.isWeChatBrowser) {
  //     // mask.value = true
  //     // return
  //   }
  //   await getCard()
  //   mask.value = true
  // }
})
</script>
<template>
  <view class="container">
    <view class="card">
      <view class="name">黑银洗车会员卡</view>
      <view class="time"> ID:{{ cardParmas.id }}</view>
    </view>
    <view class="img_box">
      <image src="https://image.blacksilverscore.com/uploads/a72772e5-fa9d-411a-8035-4666e3caba57.png"
        mode="widthFix" class="img" />
    </view>
    <u-button style="margin-top:160rpx;" type="primary"  ripple cirlce @click="getCard" :custom-style="{
      background: 'linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7)',borderRadius: '100rpx',
    }">立即领取</u-button>
    <u-popup v-model="mask" :mask-close-able="false" :border-radius="12" mode="center" width="400rpx" height="280rpx">
      <view class="mask_tips"> 恭喜您，会员卡领取成功，请使用黑银APP免费洗车 </view>
    </u-popup>
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  padding: 30rpx;

  .card {
    border: 1px solid #e5e5e5;
    border-radius: 12rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30rpx;
    height: 300rpx;
    text-align: center;
    background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);
    position: relative;

    .time {
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
    }
  }

  .img_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    .img {
      width: 300rpx;
      height: auto;
    }
  }

  .mask_tips {
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    padding: 30rpx;
    box-sizing: border-box;
  }
}
</style>
